<template>
    
    <!-- 组件的模板 -->
    <div class="page form-report">
        <div class="weui-cells">
            <div id="items">
                <template v-for="item in require_field">
                    <div class="weui-cell item" :class="{'dragitem': item.type !== 'Location', 'pad_left_12': require_field.length < 2}">
                        <span class="bg_sprite btn_delete" v-if="item.type !== 'Location'" @click="removeItem($index)"></span>
                        <div class="weui-cell__bd" @click="gotoDesign($index,item)">
                            <p><span class="title" style="color: #999">{{item.info.title}}<span v-if="item.info.required == 1"> (必填)</span></span></p>
                        </div>
                        <span class="btn-drag active glyphicon-move" v-if="require_field.length > 2 && item.type !== 'Location'"><span></span><span></span><span></span></span>
                    </div>
                </template>
            </div>
        </div>
        <a class="add-item touch" href="javascript:;" @click="addRequire">
            <span class="icon bg_sprite"></span>
            <span>添加填写项</span>
        </a>
    </div>

</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import Sortable from 'sortablejs'
    import Sw from 'swiped'
    import widget from 'gapi/widget.js'
    import cache from 'gapi/cache.js'
    import clientUi from 'gapi/clientUi.js'
    import * as util from 'js/util.js'
    import commonPage from 'clientApi/commonPage.js'
    // commonPage.canPullWebView(true)
    import KCApiApp from 'clientApi/KCApiApp.js'
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    /**
     *  组件实例对象
     */
    export default {
        components: {

        },
        data: function(){
            return{
                require_field: [
                    {
                        "id": '',
                        "type": "Location",
                        "name": "位置",
                        "info": {
                            "title": "位置",
                            "value": {
                                "lat": "",
                                "lng": "",
                                "addr": ""
                            },
                            "tune_distance":500,
                            "tip": "",
                            "required": 1
                        }
                    },
                    // {
                    //     "id": "",
                    //     "type": "SingleText",
                    //     "name": "单行文字",
                    //     "info": {
                    //         "title": "标题",
                    //         "tip": "提示语",
                    //         "required": true,
                    //         "value": ""
                    //     },
                    //     "order":1
                    // },
                    // {
                    //     "id": "",
                    //     "type": "SingleText",
                    //     "name": "单行文字",
                    //     "info": {
                    //         "title": "标题2",
                    //         "tip": "提示语2",
                    //         "required": 0,
                    //         "value": ""
                    //     },
                    //     "order":2
                    // },
                    // {
                    //     "id": "",
                    //     "type": "SingleText",
                    //     "name": "单行文字",
                    //     "info": {
                    //         "title": "标题2",
                    //         "tip": "提示语2",
                    //         "required": 0,
                    //         "value": "https://cdn.doumistatic.com/20,4098ca781d4192.jpg@base@tag=imgScale&q=75&w=686&m=0"
                    //     },
                    //     "order":3
                    // }
                ]
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                cache.getCache('designInfo', (data) => {
                    this.require_field = data
                })
                
                
            },
            addRequire(){
                setTimeout(() => {
                    KCApiApp.showDesignWindow('kqandsign')
                }, 200)
            },
            gotoDesign(index, item){
                let urd = 'DesignFormSingle'
                switch(item.type){
                    case 'SingleText':
                        urd = 'DesignFormSingle';
                        break;
                    case 'TextArea':
                        urd = 'DesignFormArea';
                        break;
                    case 'Number':
                        urd = 'DesignFormNumb';
                        break;
                    case 'Select':
                        urd = 'DesignFormSelect';
                        break;
                    case 'Date':
                        urd = 'DesignFormDate';
                        break;
                    case 'Location':
                        urd = 'DesignFormLoca';
                        break;
                    case 'Imageview':
                        urd = 'DesignFormImg';
                        break;
                    default :
                        urd = 'DesignFormSingle';
                        break;
                }
                cache.setCache('designInfo', item, 10000)
                let encodeStr = encodeURIComponent(`type=kqandsign&matindex=${index}`)
                location.href = `dmsaas://${urd}?urdData=${encodeStr}`
                // alert(JSON.stringify(this.require_field))
            },
            removeItem(index){
                if(this.require_field[index].type === 'Location'){
                    widget.toast('位置为默认字段,无法删除')
                }else{
                    clientUi.showDialog('提示', '确定删除此字段？', (data) => {
                        // alert(JSON.stringify(data))
                        if(data.status == 1){
                            // console.log(index);
                            // if(this.require_field[index].id !== ''){
                            //     this.delete_format.push(this.require_field[index].id)
                            // }
                            // alert(JSON.stringify(this.delete_format))
                            this.require_field.splice(index,1)
                            //删除以后也要重新缓存新数据
                            // cache.setCache(', this, 10000)
                        }
                    })
                }
            },
            saveResume(){
                this.require_field.forEach((obj, index) => {
                    return obj.order = index + 1
                })
                // alert(JSON.stringify(this.require_field))
                commonPage.goBack(1, {key: "requireField", require_field: this.require_field})
            }
        },
        created(){

            this.init();
            window.loadData = (data) => {
                console.log(data)
                // alert(JSON.stringify(data))
                if(data&&data !== undefined){
                    if(data.matindex == -1){//增加字段
                        this.require_field.push(data.designInfo)
                    }else{//修改字段
                        this.require_field.splice(data.matindex, 1, data.designInfo)
                    }
                }
            }

            commonPage.updateTitleBar({
                // backAction: 'checkChange',    // 点击返回按钮的动作（即回调函数名称）
                // leftDisplay: false,            // 是否显示左按钮
                // leftText: '',                // 左按钮文案
                // leftAction: 'checkChange',    // 点击左按钮的动作（即回调函数名称）
                rightDisplay: true,            // 是否显示右按钮
                rightText: '保存',            // 右按钮文案
                rightAction: 'saveResume'    // 点击右按钮的文案（即回调函数名称）
            })
            window.saveResume = this.saveResume
        },
        ready(){
            const that = this;
            Sortable.create(items, {
                handle: '.glyphicon-move',
                animation: 100,
                onEnd: function (evt){
                    console.log(evt)
                    // alert(evt.oldIndex)
                    let tempObj = that.require_field[evt.oldIndex+1]
                    that.require_field.splice(evt.oldIndex+1, 1)
                    that.require_field.splice(evt.newIndex+1, 0, tempObj)
                    // alert(JSON.stringify(that.require_field))
                    //删除以后也要重新缓存新数据
                    // cache.setCache('', that., 10000)
                },
                draggable: ".dragitem",
            })
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<!-- <style src="static/css/global.css"></style> -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common2.css"></style>
<style src="../../static/css/form-report.css"></style>
<style type="text/css">
    .relative{
        /*position: relative;*/
        /*background-color: #FF3B30;*/
    }
    div.item{
        position: relative;
        padding-left: 42px;
    }
    div.pad_left_12{
        padding-left: 12px;
    }
    div.weui-cell:before {
        left:42px;
    }
    span.btn_delete{
        position: absolute;
        left: 12px;
        top:15px;
    }
    .sortable-chosen{
        -webkit-box-shadow: 0 0 15px #888888;
        -moz-box-shadow: 0 0 15px #888888;
        -ms-box-shadow: 0 0 15px #888888;
        -o-box-shadow: 0 0 15px #888888;
        box-shadow: 0 0 15px #888888;
    }
</style>


